<template>
  <div class="course">
    <Nav
      class="course-back"
      backTitle="选择调出讲次"
    />
    <div class="student-name">
      报读学员：{{studentName}}
    </div>
    <div class="course-detail">
      <course-message
        :showTeacher="true"
        :item="courseInfo"
        :hasAddress="true"
        :hasPeriodNo="false"
      />
    </div>
    <div class="lecture-list">
      <ul>
        <li
          v-for="item in lectures"
          class="lecture-li"
          :class="{'lecture-active': active === item.lectureNo, 'lecture-disabled': item.attendClassRecord.isAttendance === '1' || item.attendClassRecord.shiftStatus === '1'}"
          @click="handleChoose(item)"
        >
          <div class="lecture-num">{{item.lectureNo}}讲</div>
          <div class="lecture-time">
            <div>
              {{item.classDate | formatDate('MM月DD日')}}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div
      @click="handleNext"
      class="icon-next"
    >下一步</div>
  </div>
</template>

<script>
import Nav from 'components/nav/nav.vue'
import CourseMessage from 'components/course/courseMessage.vue'
import Empty from 'components/empty.vue'
import api from 'util/xhr'

export default {
  components: {
    Nav,
    CourseMessage,
    Empty
  },
  data: function() {
    return {
      active: -1,
      courseInfo: {},
      classId: '',
      studentName: '',
      lectures: []
    }
  },
  created() {
    this.courseInfo = this.$route.query.courseInfo
      ? JSON.parse(this.$route.query.courseInfo)
      : {}
    this.studentName = this.$route.query.studentName
    this.loadClassLecturesData()
  },
  methods: {
    handleChoose(item) {
      if (
        item.attendClassRecord.isAttendance === '1' ||
        item.attendClassRecord.shiftStatus === '1'
      ) {
        return
      }
      this.active = item.lectureNo
    },
    handleNext() {
      if (this.active === -1) {
        this.$alert({ content: '请选择调出讲次！' })
        return
      }
      let attendClassRecordId = ''
      this.lectures.map(val => {
        if (val.lectureNo === this.active) {
          attendClassRecordId = val.attendClassRecord.attendClassRecordId
        }
      })
      this.$router.push(
        '/transferred-course?courseInfo=' +
          JSON.stringify(this.courseInfo) +
          '&lecture=' +
          this.active +
          '&attendClassRecordId=' +
          attendClassRecordId
      )
    },
    loadClassLecturesData() {
      api
        .post('/api/m/classLectureOfStudent', {
          regId: this.courseInfo.regId
        })
        .then(data => {
          this.lectures = data
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.course {
  background: #f8f8f8;
  height: auto;
  min-height: 100%;
  padding-top: 2px;
  width: 100%;
  float: left;
  clear: both;
}

.class-lecture {
  position: relative;
  padding-bottom: 230px;
  box-sizing: border-box;
}
.class-lecture .wornWarmimg {
  position: absolute;
  bottom: 120px;
  left: 0;
  padding: 0 30px;
  font-size: 28px;
  color: #666;
}
.class-lecture .lecture-list {
  margin-bottom: 0;
}

.course-back {
  position: relative;
  top: -2px;
}

.student-name {
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
  background: white;
  padding: 0 45px;
}

.course-list {
  padding-bottom: 100px;
}
.course-list li {
  background: white;
  transform: translateX(0px);
  width: 100%;
  display: flex;
  transition: transform 0.5s;
  padding: 0;
  position: relative;
  margin: 20px 0;
}
.course-detail {
  padding: 0 40px;
  background: #fff;
}
.lecture-list {
  background-color: #fff;
  padding: 0 40px 10px;
  margin-bottom: 108px;
}
.lecture-list ul {
  display: flex;
  flex-wrap: wrap;
}
.lecture-li {
  width: 24%;
  background-color: #e5f5f6;
  border-radius: 6px;
  margin-bottom: 30px;
  font-size: 24px;
  height: 85px;
  color: #333;
  padding: 5px 0;
  line-height: 1.4;
  box-sizing: border-box;
  text-align: center;
  background: url('../assets/img/lecture-click.png') no-repeat;
  background-size: 100% 100%;
}
.lecture-li:nth-child(4n + 2) {
  margin: 0 0.666% 0 1.333%;
}
.lecture-li:nth-child(4n + 3) {
  margin: 0 1.333% 0 0.666%;
}
.lecture-active {
  background: url('../assets/img/lecture-active.png') no-repeat;
  background-size: 100% 100%;
}
.lecture-disabled {
  background: url('../assets/img/lecture-disabled.png') no-repeat;
  background-size: 100% 100%;
}
.lecture-num {
  padding-left: 2px;
  font-size: 28px;
}
.icon-next {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  line-height: 88px;
  color: white;
  font-size: 36px;
  background: #3271f1;
  text-align: center;
}
</style>
